<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="medium">
          <el-form-item label="工段类型" prop="lineType">
            <el-select v-model="form.lineType" placeholder="请选择工段类型" style="width:300px">
              <el-option :value="item" :label="item" v-for="(item,index) in lineTypeList" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="线体简称" prop="sectionAbbreviation">
                <el-input v-model="form.sectionAbbreviation" style="width:300px" />
            </el-form-item>
            <el-form-item label="工段编号" prop="sectionNo" >
                <el-input v-model="form.sectionNo" @blur="checkSectionExist" style="width:300px" />
            </el-form-item>
            <el-form-item label="工段地址" prop="address">
                <el-input v-model="form.address" style="width:300px" />
            </el-form-item>
            <el-form-item label="工段名称" prop="sectionName">
                <el-input v-model="form.sectionName" style="width:300px" />
            </el-form-item>        
            <el-form-item label="工作中心" prop="workCenter">
                <el-select v-model="form.workCenter" placeholder="请选择工作中心" @focus="getCenterList" style="width:300px">
                  <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="工段状态" prop="status">
                <el-switch v-model="form.status" active-value="1" inactive-value="0" active-text="开启" inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="工段长工号" prop="sectionManagerNumber">
              <el-select v-model="form.sectionManagerNumber" filterable clearable placeholder="请选择工段长工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.sectionManagerNumber" @blur="testExist(form.sectionManagerNumber,2)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item label="QE人员工号" prop="qeNumber">
              <el-select v-model="form.qeNumber" filterable clearable placeholder="请选择QE人员工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.qeNumber" @blur="testExist(form.qeNumber,3)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item label="工艺人员工号" prop="technologist">
              <el-select v-model="form.technologist" filterable clearable placeholder="请选择工艺人员工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.technologist" @blur="testExist(form.technologist,2)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item label="PMC人员工号" prop="pmcNumber">
              <el-select v-model="form.pmcNumber" filterable clearable placeholder="请选择PMC人员工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.pmcNumber" @blur="testExist(form.pmcNumber,2)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item label="设备人员工号" prop="grindingApparatus">
              <el-select v-model="form.grindingApparatus" filterable clearable placeholder="请选择设备人员工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.grindingApparatus" @blur="testExist(form.grindingApparatus,2)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item label="物流人员工号" prop="logistics">
              <el-select v-model="form.logistics" filterable clearable placeholder="请选择物流人员工号" @focus="focusUserName" style="width:300px">  
                <el-option :value="item.jobNumber" :label="item.jobNumber" v-for="(item,index) in userNameList" :key="index"/>
              </el-select>
                <!-- <el-input v-model="form.logistics" @blur="testExist(form.logistics,2)" style="width:300px" /> -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">添加</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addWorkSecInfo,WorkSecExist,getCenter } from '../../api/workSection.js'
import { validateNum } from '../../utils/validate'
import { testWorkNum } from '@/api/user'
import mixin from '@/utils/mixin.js'
export default {
      name: "add_WorkSection",
      mixins: [mixin],
      data() {
        return {
          form: {                                 // 工段信息提交的表单
            lineType: '装配',                         //工段类型
            sectionNo: '',                        // 工段编号
            address: '',                          //工段地址
            sectionAbbreviation: '',
            workCenter: '',                       //工作中心
            status: '1',                          //工段状态,默认为开启状态
            sectionManagerNumber: '',             //工段长工号
            qeNumber: '',                         //QE人员工号
            sectionName: '',                      //工段名称
            technologist: '',                     //工艺人员工号
            pmcNumber: '',                         //pmc人员工号
            grindingApparatus: '',                 //设备人员工号
            logistics: ''                          //物流人员工号
          },
          centerList: '',                         //工作中心列表
          rules: {
            sectionAbbreviation: [
              { required: true, message: '请输入线体简称', trigger: 'blur' }
            ],
            sectionNo: [
              { required: true, message: '请输入工段编号', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入工段地址', trigger: 'blur' }
            ],
            sectionName: [
              { required: true, message: '请输入工段名称', trigger: 'blur' }
            ],
            workCenter: [
              { required: true, message: '请选择工作中心', trigger: 'blur' }
            ],
            sectionManagerNumber: [
              { required: true, message: '请输入工段长工号', trigger: 'blur' }
            ],
            qeNumber: [
              { required: true, message: '请输入QE人员工号', trigger: 'blur' }
            ],
            pmcNumber: [
              { required: true, message: '请输入PMC人员工号', trigger: 'blur' }
            ],
            technologist: [
              { required: true, message: '请输入工艺人员工号', trigger: 'blur' }
            ],
            // grindingApparatus: [
            //   { required: true, message: '请输入设备人员工号', trigger: 'blur' }
            // ],
            // logistics: [
            //   { required: true, message: '请输入物流人员工号', trigger: 'blur' }
            // ]
          },
          lineTypeList: [
            '组件',
            '装配',
            '包装',
            '喷涂'
          ],
        }
      },
      methods: {
        // 提交表单之前先进行验证
        // 若整个表单验证通过，调用onSubmit函数提交表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.onSubmit()
            } else {
              return false
            }
          })
        },
        // 对工段信息表单进行提交
        async onSubmit() {
          let query = Object.assign({},this.form)
          query.lineType = query.lineType == '组件'?1:
                           query.lineType == '装配'?2:3
          // if(this.form.workCenter != '数控车间' || this.form.workCenter != 'EMS总装车间'){ delete query.grindingApparatus}
          // if(this.form.workCenter != '数控车间' || this.form.workCenter != 'EMS总装车间'){ delete query.logistics}
          const data = await addWorkSecInfo(query)
          const errMsg = data.msg
          if(data.code == '1'){
            this.$message({
              showClose: true,
              message: errMsg,
              type: 'success'
            })
          }else{
            this.$message({
              showClose: true,
              message: errMsg,
              type: 'warning'
            })
          }
        }, 
        // 获取工作中心
        async getCenterList() {
          let {data} = await getCenter()
          this.centerList = data
        },
        // 对整个表单输入进行清空
        resetForm(formItem) {
          this.$refs[formItem].resetFields()
        },
        // 当焦点移开input输入框触发该函数，检查工段编号是否已经注册
        async checkSectionExist() {
        const data = await WorkSecExist({sectionNo: this.form.sectionNo})
        let errmsg = data.msg
        if(data.code =='1'){
              this.$message({
                type: 'success ',
                message: '工段编号验证通过'
            })
          } else {
              this.$message({
                type: 'warning',
                message: errmsg
            })
          }
        },
        // 将当前输入的工号传递到后台系统，验证改工号是否已经被注册
        // 此处有两个工号的检查，分别是工段长与QE人员，传入的typeNum以示区分
        async testExist(value,typeNum) {
        const data = await testWorkNum({ jobNumber: value,type: typeNum})
        if(data.code == 2){
            this.$message({
              type: 'warning',
              message: "工号验证未通过"
          })
        } else {
            this.$message({
              type: 'success',
              message: "工号验证通过"
          })
        }
      },
    }
}
</script>

<style>

</style>